<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <div class="cartContainer">
        <!-- 头部导航栏 -->
        <div class="Navigation">
            <ul>
                <li>
                    <a href="javascript:;">豆瓣</a>
                </li>
                <li>
                    <a href="javascript:;">读书</a>
                </li>
                <li>
                    <a href="javascript:;">电影</a>
                </li>
                <li>
                    <a href="javascript:;">音乐</a>
                </li>
                <li>
                    <a href="javascript:;">同城</a>
                </li>
                <li>
                    <a href="javascript:;">小组</a>
                </li>
                <li>
                    <a href="javascript:;">阅读</a>
                </li>
                <li>
                    <a href="javascript:;">FM</a>
                </li>
                <li>
                    <a href="javascript:;">时间</a>
                </li>
                <li>
                    <a href="javascript:;">豆品</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="JavaScript:;">下载豆瓣客户端</a>
                </li>
                <li>
                    <a href="javascript:;">登陆/注册</a>
                </li>
            </ul>
        </div>
        <!-- 内容区 -->
        <div class="cartContent">
            <!-- 内容区头部 -->
            <div class="header">
                <div class="logo">
                    <a href="javascript:;">
                        <sapn>豆瓣 | 豆品</sapn>
                    </a>
                </div>
                <div class="personal">
                    <img src="https://img1.doubanio.com/icon/user_normal.jpg" alt="">
                    <span class="userName">个人中心</span>
                </div>
            </div>
            <!-- 购物车文本 -->
            <p class="buyCart">购物车</p>
            <div class="commodityList">
                <!-- 查看每个组件里购买的商品 -->
                <ul class="classification">
                    <li class="active">
                        <a href="javascript:;">
                            全部商品（1）
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            豆瓣豆品（1）
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            豆瓣书店（0）
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            豆瓣时间（0）
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            电影周边（0）
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            伴宠乐园（0）
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            绿盒（0）
                        </a>
                    </li>
                </ul>
                <div class="shangpin">
                    <p class="information">商品信息</p>
                    <p class="unitPrice">单价（元）</p>
                    <p class="number">数量</p>
                    <p class="Subtotal">小计（元）</p>
                </div>
                <!-- 上部全选 -->
                <div class="shopHeader">
                    <input type="checkbox">
                    <span class="shopName">豆瓣豆品</span>
                    <a href="javascript:;">联系客服</a>
                </div>
                <!-- 商品列表 -->
                <div class="shopList">
                    <!-- 单个商品列表 -->
                    <div class="shopListItem">
                        <!-- 复选框 -->
                        <div class="shopInput">
                            <input type="checkbox">
                        </div>
                        <div class="shopInformation">
                            <!-- 商品图片 -->
                            <div class="shopImg">
                                <img src="https://img9.doubanio.com/view/dianpu_product_item/small/public/p25401714.jpg" alt="">
                            </div>
                            <!-- 商品参数 -->
                            <div class="details">
                                <p class="shopName">豆瓣电影日历2021</p>
                                <p class="shopParameter">颜色：森林绿</p>
                                <p class="shopParameter">尺寸：经典版</p>
                            </div>
                        </div>
                        <!-- 单价 -->
                        <div class="shopUnitPrice">￥99</div>
                        <!-- 数量 -->
                        <div class="shopNumber">
                            <button>-</button>
                            <input type="text" placeholder="1">
                            <button>+</button>
                        </div>
                        <!-- 总价 -->
                        <div class="shopSubtotal">￥99</div>
                        <!-- 删除该商品 -->
                        <div class="delete">
                            <a href="javascript:;">X</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 全选和结算 -->
        <div class="footer">
            <div class="footerContent">
                <div class="selectAllInput">
                    <input type="checkbox">
                </div>
                <span class="selectAll">全选</span>
                <span class="selected">已选择 1 件商品</span>
                <div class="cartInfo">
                    <sapn class="freight">不含运费</sapn>
                    <span class="total">合计：</span>
                    <span class="allPrice">￥99</span>
                    <button>结算</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>